<template>
    <!-- 组件模板内容 -->
    <div class="get_code mg_rl12 ft16 cl333" >
        <label class="db" :style="{width:width+'px'}">验证码</label>
        <input type="tel" :maxlength="maxlength || 6" placeholder="请输入" class="br0"  @input="changeCode($event.target.value,$event.target)">
        <span class=" thinner-border db ft12" :class="{disabled:disabled}" @click="getCodeFn">{{getCode}}</span>
    </div>
</template>

<script>
    /**
     *  引入工具类库 或 Navtive API
     *  example : import widget from 'gapi/widget'
     */

    import * as util from 'js/util.js'
    import widget from 'gapi/widget'
    import $ from 'zepto'
    import userCenterApi from 'clientApi/userCenterApi'
    import clientInfo from 'gapi/clientInfo'
    import safety from 'gapi/safety' 
    import commonPage from 'clientApi/commonPage.js'
    import clientUtil from 'clientApi/util' 
    // import ApiClientUi from 'clientApi/ApiClientUi.js'
    /**
     *  引入Action
     *  example : import { someFunction } from './SomeAction'
     */
    
    /**
     *  引入Getter
     *  example : import { someFunction } from './SomeGetters'
     */

    export default {
        vuex: {
            getters: {
                
            },
            actions: {

            }
        },
        data:function(){
            return {
                getCode:'获取验证码',
                disabled:false,
                codeNumber:'',
            }
        },
        props:['cbfn','width','getcodeurl','phone','maxlength',],
        methods: {
            getCodeFn(){
                if(this.disabled) return;
                let time =  60;
                this.disabled = true;
                this.getCode = time + '秒后重发';
                commonPage.loadPageStatus('loading')    
                let apiUrl = "";
                let headers = {}              
                util.ajax({
                    url:'/wallet/withdraw/msg/get',
                    type:'GET',
                    data:{
                      
                    },
                    timeout:10000,
                    success:(data) => {
                        commonPage.loadPageStatus('loadSuccess')
                        let timeInterval = setInterval(()=>{
                            time--;
                            this.getCode = time + '秒后重发';
                            if(time<=0){
                                clearInterval(timeInterval);
                                this.getCode = '获取验证码';
                                this.disabled = false;
                            }
                        },1000);
                    },
                    error:function(xhr, status){
                       commonPage.loadPageStatus('loadSuccess')
                        if (status == 'timeout'){
                          widget.toast('网络请求超时');
                        }else{
                            if(xhr.status==400){
                                    let err=JSON.parse(xhr.responseText);
                                    if(err.code==-5){//显示图片验证码浮层 
                                        userCenterApi.showCodeDialog(this.phone, data => {
                                            if(data.status == 1){ 
                                                let timeInterval = setInterval(()=>{
                                                    time--;
                                                    this.getCode = time + '秒后重发';
                                                    if(time<=0){
                                                        clearInterval(timeInterval);
                                                        this.getCode = '获取验证码';
                                                        this.disabled = false;
                                                    }
                                                },1000);       
                                            }
                                        })
                                    }else{
                                        widget.toast(err.message);
                                        this.getCode = '获取验证码';
                                        this.disabled = false;                                          
                                    }
                            }else{
                                this.getCode = '获取验证码';
                                this.disabled = false;
                                widget.toast('服务器异常');
                            }
                        }
                    }
                })

            },
            changeCode(val,target){
                let newVal = val.replace(/\D/g,'');
                target.value = newVal;
                this.$emit(this.cbfn,newVal)

            }
        },
        created (){
            
        }
    }

    
</script>
<style type="text/css">
    .get_code{
        position: relative;
        display: flex;
        align-items: center;
        justify-content: space-between;
        height: 54px;
    }
    .get_code span{
        position: absolute;
        right: 0;
        top: 11.5px;
        width: 82px;
        height: 30px;
        line-height: 30px;
        text-align: center;
    }
    .thinner-border {
        position: relative;
        color: #FFAA00;
    }
    .thinner-border:after {
        content: '';
        position: absolute;
        top: 0;
        left: 0;
        width: 200%;
        height: 200%;
        border: 1px solid #FFAA00;
        -webkit-transform-origin: 0 0;
        transform-origin: 0 0;
        -webkit-transform: scale(0.5, 0.5);
        transform: scale(0.5, 0.5);
        -webkit-box-sizing: border-box;
        box-sizing: border-box;
        border-radius: 3px;
    }
    .get_code input{
        flex-grow:2;
        padding-left:4px;
    }
    input::-webkit-input-placeholder { 
        color: #CCCCCC; 
    } 
    input:-moz-placeholder { 
        color: #CCCCCC; 
    } 
    input::-moz-placeholder { 
        color: #CCCCCC; 
    } 
    input:-ms-input-placeholder {
        color: #CCCCCC; 
    }  
    .get_code .disabled{
        color: #CCCCCC;
    }
    .get_code .disabled:after{
        border: 1px solid #CCCCCC;
        color: #CCCCCC;

    }
</style>
<!-- CSS 样式 -->
<!-- <style src="static/css/global.css"></style> -->


